
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--    <meta charset=utf-8">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据库后台</title>
    <!-- BOOTSTRAP STYLES-->
<!--    <link href="../css/bootstrap.css" rel="stylesheet" />-->
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <!-- CUSTOM STYLES-->
    <link href="../css/custom.css" rel="stylesheet" />
    <!-- /. WRAPPER  -->
    <!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
    <!-- JQUERY SCRIPTS -->
    <script src="../js/jquery-1.7.1.min.js"></script>
    <!-- BOOTSTRAP SCRIPTS -->
    <script src="../js/bootstrap.min.js"></script>
    <!-- METISMENU SCRIPTS -->
    <script src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js" charset="UTF-8"></script>

    <script src="../js/jquery.form.js"></script>
    <script src="../js/common.js"></script>
</head>

<body>
<div id="wrapper">
    <nav class="navbar navbar-default navbar-cls-top " role="navigation"
         style="margin-bottom: 0">
        <div class="navbar-header">
            <!--                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> -->
            <!--                     <span class="sr-only">Toggle navigation</span> -->
            <!--                     <span class="icon-bar"></span> -->
            <!--                     <span class="icon-bar"></span> -->
            <!--                     <span class="icon-bar"></span> -->
            <!--                 </button> -->
            <a class="navbar-brand">表单录入</a>
        </div>
        <div
                style="color: white; padding: 15px 50px 5px 50px; float: right; font-size: 16px;">
            <!--            <form action="../loginOut.jsp" method="post">-->
            <button id = "loginout" class="btn btn-danger">注销</button>
            <!--            </form>-->

        </div>
    </nav>
    <!-- /. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
<!--                <li class="text-center"><img src="<%=img%>"-->
<!--                                             class="user-image img-responsive" /></li>-->


                <!-- 					<li><a href="../index.jsp"><i -->
                <!-- 							class="fa fa-dashboard fa-3x"></i> 主页</a></li> -->
                <!-- 					<li><a href="UserInfo.jsp"><i class="fa fa-table fa-3x"></i> -->
                <!-- 							个人信息</a></li> -->
<!--                <li><a href="TeacherSelfExam.jsp"><i-->
<!--                        class="fa fa-desktop fa-3x"></i> 竞赛批改</a></li>-->
                <li><a href="formsubmit.html"><i class="fa fa-qrcode fa-3x"></i>
                    表单录入</a></li>
                <li><a href="distribute.html"><i
                        class="fa fa-bar-chart-o fa-3x"></i> 任务分配</a></li>
                <li><a href="feedback.html"><i
                        class="fa fa-bar-chart-o fa-3x"></i> 数据反馈</a></li>
                <li><a href="usermanage.html"><i
                        class="fa fa-bar-chart-o fa-3x"></i> 用户管理</a></li>

                <li><a href="searchlist.html"><i
                        class="fa fa-bar-chart-o fa-3x"></i> 数据查询</a></li>

                <!-- 					<li><a href="ChangePassword.jsp"><i -->
                <!-- 							class="fa fa-edit fa-3x"></i> 密码修改 </a></li> -->

            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div id="page-inner">



            <div class="container">
                <fieldset>
                    <legend>表单录入</legend>

<!--                    <form method="POST" action="../login/AddCustom" enctype="multipart/form-data" class="form-horizontal">-->
                    <form method="POST" action="../login/AddCustom" enctype="multipart/form-data" class="form-horizontal" id="formdata">
                        <div class="form-group" style="position: relative">
                            <label for="file" class="col-sm-2 control-label">请选择一个文件上传：</label>
                            <div class="col-sm-10">
                                <input id="file" type="file" name="file" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-10 col-sm-offset-2" id="fileUpload_box">
                                <input type="button" class="btn btn-sm btn-primary" value="点击上传文件" id="addcustom"/>
                            </div>
                        </div>
                    </form>





                    <div class="modal-body">姓名
                        <input id="customname" type="text"  />
                    </div>
                    <div class="modal-body">手机号
                        <input id="phone" type="text"  />
                    </div>
                    <div class="modal-body">关键词
                        <input id="keyword" type="text" />
                    </div>
                    <div class="modal-body">地域
                        <input id="area" type="text"/>
                    </div>
                    <div class="modal-body">
                        <input type="button" id="modify" class="btn btn-primary" value="新增数据" />
                    </div>
<!--                    <div class="container">-->
<!--                    <div class="row clearfix">-->
<!--                        <div class="col-md-6 column">-->
<!--                    <div class="form-group">-->
<!--                        <label for="exampleInputFile">File input</label><input name="file" type="file" id="exampleInputFile" />-->
<!--                        <p class="help-block">-->
<!--                            请按规定格式上传-->
<!--                        </p>-->
<!--                    </div>-->
<!--                    <div class="form-group">-->
<!--                        <div class="col-sm-offset-2 col-sm-10">-->
<!--                            <button id="addcustom" class="btn btn-default">Sign in</button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                            </div>-->
<!--                            <div class="col-md-6 column">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    </p>-->


<!--                    <div class="row" style="padding: 50px 20px 0px 20px">-->

<!--                        <div class="table-responsive">-->
<!--                            <table class="table table-striped" id="table1"-->
<!--                                   style="text-align: center">-->
<!--                                <thead>-->
<!--                                <td>id</td>-->
<!--                                <td>reanName</td>-->
<!--                                </thead>-->
<!--                                <tbody>-->


<!--                                </tbody>-->
<!--                            </table>-->
<!--                        </div>-->
<!--                    </div>-->

                    <div class="col-sm-offset-5 col-sm-7">
                        <input id="ebutton" type="button" value="导出EXCEL"
                               onClick="getXlsFromJsp('table1')" class="btn btn-primary"
                               style="display: none">
                    </div>
                </fieldset>
            </div>
            <!-- /. PAGE INNER  -->
        </div>
        <!-- /. PAGE WRAPPER  -->
    </div>
<!--    <script type="text/javascript" src="../js/AjaxAPI.js" charset="UTF-8"></script>-->
<!--    <script src="../js/jquery.dataTables.js"></script>-->
</div>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#addcustom").click(function () {
                var fileInput = $('#file').get(0).files[0];
                // console.info(fileInput);
                if(fileInput){
                    $("#formdata").ajaxSubmit(function (data) {
                        let datas=JSON.parse(data);
                        alert(datas.msg)
                        if(datas.tmp!=0){
                            tableToExcel(datas.jsonobject);
                        }
                        resetFileInput($("#file"))
                    })
                }else{
                    // return false;
                    alert("文件错误或未选择文件");
                }

            });
            function resetFileInput(file){
                file.after(file.clone().val(""));
                file.remove();
            }

            $("#modify").click(function () {
                let d1 = {
                    // id:$("#displayid").val(),
                    realName:$("#customname").val(),
                    phone:$("#phone").val(),
                    keyword:$("#keyword").val(),
                    area:$("#area").val(),

                };
                $.ajax({
                    type: "POST",
                    url: "../formsubmit/addCustombyhand",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(d1),
                    dataType: "text",
                    success: function (data) {
                        alert(data)
                        // $("#searchlist").click();
                        // $('#myModal').dialog('close');
                    },
                    error: function (data) {
                        window.location.href = "/msgtable/html/login.html"
                        alert("请登录")
                    }
                });
            });







        })




    </script>
    <script type="text/javascript">
    function tableToExcel(jsonData){
        //列标题
        let str = '';
        //循环遍历，每行加入tr标签，每个单元格加td标签
        // alert(jsonData.length)
        for(let i = 0 ; i < jsonData.length ; i++ ){
            str+='<tr>';
            for(let item in jsonData[i]){
                //增加\t为了不让表格显示科学计数法或者其他格式
                str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
            }
            str+='</tr>';
        }
        //Worksheet名
        let worksheet = 'Sheet1'
        let uri = 'data:application/vnd.ms-excel;base64,';

        //下载的表格模板数据
        let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
      xmlns:x="urn:schemas-microsoft-com:office:excel"
      xmlns="http://www.w3.org/TR/REC-html40">
      <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>${worksheet}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head><body><table>${str}</table></body></html>`;
        //下载模板
        window.location.href = uri + base64(template)
    }
    //输出base64编码
    function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }
</script>
</body>
</html>